const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入html-webpack-plugin
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//const ExtractTextPlugin = require("extract-text-webpack-plugin"); //webpack 4以下使用
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //webpack 4以上使用
var config = {};
config.mode = 'production';
//config.mode = 'development';
config.entry = {
    index: "./src/js/index.js",
    index2: "./src/js/index2.js"
};
config.output = {
    filename: "js/[name].bundle.[hash].js", //[hash]会在后面生成随机hash值
    path: path.join(__dirname, "/dist"),
    publicPath: "/dist"
};
config.module = { // 处理对应模块
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] //处理css
    }, {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
    }, {
        test: /\.(png|jpg|gif)$/,
        use: [{
            loader: 'url-loader',
            options: {
                outputPath: '/images/', //输出到images文件夹
                limit: 500, //是把小于500B的文件打成Base64的格式，写入JS
                filename: "[name]"
            }
        }]
    }]
};
config.plugins = [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        filename: './index.html', //输出文件名
        template: './src/index.html', //以当前目录下的index.html文件为模板生成dist/index.html文件
        title: 'webpack'
    }),
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: 'css/[name][hash].css'
    }), new webpack.ProvidePlugin({
        $: './jquery.min.js',
        jQuery: './jquery.min.js',
        p: './public.js'
    })
];
config.optimization = {
    splitChunks: {
        cacheGroups: {
            vendor: {
                name: "vendor",
                test: /[\\/]node_modules[\\/]/,
                chunks: "all",
                priority: 10 // 优先级
            },
            common: {
                name: "common",
                test: /[\\/]src[\\/]js[\\/]/,
                chunks: "all",
                priority: 5
            }
        }
    }
};
config.devServer = { //配置此静态文件服务器，可以用来预览打包后项目
    inline: true, //打包后加入一个websocket客户端
    hot: true, //热加载
    contentBase: path.resolve(__dirname, 'dist'), //开发服务运行时的文件根目录
    host: 'localhost', //主机地址
    port: 9090, //端口号
    compress: true, //开发服务器是否启动gzip等压缩
    title: "测试"
};
module.exports = config;